<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    function div_hover(){

        $("div").hover(

            function(){
                $(this).addClass("hover");
             //event.stopPropagation();
            },function(){
                $(this).removeClass("hover");
		  // 	$(this).addClass("hover");
             // event.stopPropagation();
            }
        );
    }

    $(function(){

        div_hover();

    });

</script>

<style type="text/css">

    .box1{background:green;width:400px;height:400px;}

    .box2{background:yellow;width:300px;height:300px;}

    .box3{background:#ccffee;width:200px;height:200px;}

    .hover{background:#ff0000}

</style>

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>